﻿@model IEnumerable<WebapiAngularCRUD.Models.Employee>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Left list, Right Add/Edit</h2>

<div class="row" ng-controller="empController">
    <div class="col-md-6">

        <table class="table table-striped table-responsive">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Salary
                </th>
                <th>
                    DeptName
                </th>
                <th>
                    Designation
                </th>
                <th></th>
            </tr>
            <tr ng-repeat="emp in Employees">
                @*ng-click="get(emp)" :click row to display data instead of clicking edit*@
                <td>
                    {{emp.Name}}
                </td>
                <td>
                    {{emp.Salary}}

                </td>
                <td>
                    {{emp.DeptName}}

                </td>
                <td>
                    {{emp.Designation}}
                </td>
                <td>
                    <button class="btn btn-info" ng-click="get(emp)">Edit</button>&nbsp;
                    <button class="btn btn-danger" ng-click="delete(emp.Id)">Delete</button>
                </td>
            </tr>
        </table>
    </div>


    <div class="col-md-6">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="Id" class="col-md-4">Id</label>
                <input type="text" id="Id" ng-model="Id" class="form-control col-md-8" readonly="readonly"/>
            </div>
            <div class="form-group">
                <label for="Name" class="col-md-4">Name</label>
                <input type="text" id="Name" ng-model="Name" class="form-control col-md-8" />
            </div>
            <div class="form-group">
                <label for="Salary" class="col-md-4">Salary</label>
                <input type="number" id="Salary" ng-model="Salary" class="form-control col-md-8" />
            </div>
            <div class="form-group">
                <label for="DeptName" class="col-md-4">DeptName</label>
                <input type="text" id="DeptName" ng-model="DeptName" class="form-control col-md-8" />
            </div>
            <div class="form-group">
                <label for="Designation" class="col-md-4">Designation</label>
                <input type="text" id="Designation" ng-model="Designation" class="form-control col-md-8" />
            </div>
            <button class="btn btn-primary" ng-click="clear()">New</button>
            <button class="btn btn-success" ng-click="save()">Save</button>
        </form>
        <br/>
        <p class="lead">{{Message}}</p>
    </div>
</div>

@section scripts{
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/app/EmpService.js"></script>
    <script src="~/Scripts/app/EmpController.js"></script>
}

